<template>
  <div class="form-input-area">
    <div class="default-box-area" style="position: relative">
      <Spin :withIcon="true" v-if="loading"></Spin>
      <div class="flx-row-s-c title-area">
        <!-- <div class="b-r w-p-100">国际域名模板</div>
        <div class="b-r w-p-100">国际域名模板</div> -->
        <div class="w-p-100">域名模板</div>
      </div>
      <div class="flx-row-c-c line-area b-b">
        <span class="c-d2 f-14" style="margin-right: 10px">选择默认模板：</span>
        <span
          class="c-d2 f-w-600 f-14"
          v-if="selectTemplateName"
          style="
            margin-right: 15px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 200px;
          "
          :title="selectTemplateName"
          >{{ selectTemplateName }}</span
        >
        <div
          class="b-user-strong-button small-code-button"
          @click="templateSelectModalShow = true"
        >
          点击选择
        </div>
        <template-select-modal
          :show.sync="templateSelectModalShow"
          :tSelect="templateSelect"
          @check-submit="selectTemplateSubmit"
        ></template-select-modal>
        <!-- <Select v-model="register" style="width: 140px;margin: 0 175px 0 70px;">
          <Option v-for="item in templateList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select> -->
        <!-- <Select v-model="registerDate" style="width: 140px;">
          <Option v-for="item in registerDateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select> -->
      </div>
      <!-- <div class="flx-row-s-c line-area b-b">
        <span class="c-d2 f-14">转入</span>
        <Select v-model="transferIn" style="width: 140px;margin: 0 175px 0 70px;">
          <Option v-for="item in templateList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        <Select v-model="registerDate" style="width: 140px;">
          <Option v-for="item in registerDateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div> -->
      <!-- <div class="flx-row-s-c line-area b-b">
        <span class="c-d2 f-14">转出</span>
        <Select v-model="transferOut" style="width: 140px;margin: 0 175px 0 70px;">
          <Option v-for="item in templateList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        <Select v-model="registerDate" style="width: 140px;">
          <Option v-for="item in registerDateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div> -->
      <!-- <div class="flx-row-s-c line-area b-b">
        <span class="c-d2 f-14">交易</span>
        <Select v-model="transaction" style="width: 140px;margin: 0 175px 0 70px;">
          <Option v-for="item in templateList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        <Select v-model="registerDate" style="width: 140px;">
          <Option v-for="item in registerDateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div> -->
      <div class="flx-row-c-c" style="height: 70px">
        <div class="user-strong-button submit-button-style" @click="submit">
          确认提交
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDefaultTemplate,
  setDefaultTemplate,
  getTemplateSelectList,
  // getTemplateList,
} from "@/api/user";
export default {
  components: {
    templateSelectModal: () =>
      import("_c/modal/templateSelectModal/templateSelectModal.vue"),
  },
  name: "VipDefault",
  data() {
    return {
      loading: false,
      templateList: [],
      templateSelect: null,
      selectTemplateName: "",
      templateSelectModalShow: false,
      // 表单数据
      register: null,
      transferIn: null,
      transferOut: null,
      transaction: null,
    };
  },
  created() {},
  mounted() {
    this.getTemplateList();
  },
  methods: {
    // 获取我的模板列表
    async getTemplateList() {
      let res = await getTemplateSelectList({
        // name: '',
        page: 1,
        limit: 10,
      });
      if (res.code == 200) {
        if (res.data.list.length <= 0) {
          this.$Message.warning("请先添加模板");
          this.$router.replace("/user/template/add");
          return;
        }
        let resu = await getDefaultTemplate();
        if (resu.code == 200) {
          if (resu.data != null) {
            this.templateSelect = resu.data.id;
            this.selectTemplateName = resu.data.name;
          }
          // if(resu.data.length > 0) {
          // this.templateSelect = id
          // this.selectTemplateName = name
          // this.register = resu.data[0].id
          // this.transferIn = resu.data[1].id
          // this.transferOut = resu.data[2].id
          // this.transaction = resu.data[3].id
          // }
        }
      }
    },
    // 选择模板
    selectTemplateSubmit(id, name) {
      this.templateSelect = id;
      this.selectTemplateName = name;
    },
    // 获取选项数据和默认模板
    async getDefaultTemplate() {
      this.loading = true;
      let res = await getTemplateSelectList();
      if (res.code == 200) {
        this.templateList = res.data;
        let resu = await getDefaultTemplate();
        if (resu.code == 200) {
          if (resu.data.length > 0) {
            this.register = resu.data[0].id;
            this.transferIn = resu.data[1].id;
            this.transferOut = resu.data[2].id;
            this.transaction = resu.data[3].id;
          }
        }
      }
      this.loading = false;
    },
    // 提交表单
    async submit() {
      this.loading = true;
      let params = {
        domainTemplateId: this.templateSelect,
      };
      let res = await setDefaultTemplate(params);
      if (res.code == 200) {
        this.$Message.success("设置成功！");
      }
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.default-box-area {
  border: 1px solid #d8d8d8;
  width: 650px;
  margin-top: 30px;

  .title-area {
    background-color: #eceff3;
    border-bottom: 1px solid #d8d8d8;
    font-weight: 600;
    color: #000;
    line-height: 50px;
    height: 50px;
    font-size: 16px;
    text-align: center;
  }
  .line-area {
    height: 50px;
    line-height: 50px;
    padding-left: 35px;
  }
  .b-r {
    border-right: 1px solid #d8d8d8;
  }
  .b-b {
    border-bottom: 1px solid #d8d8d8;
  }
}
</style>
